<template>
  <view class="wrapper">
    <view class="content" v-for="(item, index) in coupon" :key="item.id">
      <div class="coupons-content">
        <div class="left">
          <image
            class="coupons-img"
            :src="'https://mini.jiaw.com/img/1653720211206.jpg'"
          ></image>
        </div>
        <div class="right">
          <div class="coupons-money">{{ item.disValue }}元抵用券</div>
          <span>{{ item.couponName }}</span>
          <p>
            使用期限：{{ item.useTimeStart || '' }} -
            {{ item.useTimeEnd || '' }}
          </p>
        </div>
      </div>
      <div class="bottom">
        <div class="line"></div>
        <canvas class="canva" :canvas-id="item.id + '1'" />
        <canvas class="canvas" :canvas-id="item.id" />
        <p class="code">{{ item.code }}</p>
        <div class="rules" @click="changeRules(index)">使用规则▼</div>
        <div class="rules-item" v-show="current === index && showRules">
          <u-parse :html="item.couponDesc || '无'"></u-parse>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
import wxbarcode from 'wxbarcode'

export default {
  props: {
    coupon: {
      type: Array
    }
  },
  data() {
    return {
      current: 0,
      showRules: false
    }
  },

  methods: {
    changeRules(index) {
      if (this.current === index) {
        this.showRules = !this.showRules
      } else {
        this.current = index
        this.showRules = true
      }
    }
  },
  watch: {
    coupon: {
      handler() {
        this.coupon.forEach(e => {
          wxbarcode.qrcode(e.id + '1', e.code, 400, 300, this)
          wxbarcode.barcode(e.id, e.code, 700, 200, this)
        })
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: 0 20rpx 120rpx;
  margin-top: 100rpx;
}

.content {
  display: flex;
  flex-direction: column;
  border: 6rpx solid #dbdbdb;
  border-radius: 20rpx;
  margin: 30rpx 0;
  .coupons-content {
    padding: 38rpx 10rpx;
    display: flex;
    height: 220rpx;
    .left {
      width: 120rpx;
      .coupons-img {
        width: 80rpx;
        height: 40rpx;
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .coupons-money {
        color: #df0027;
        font-weight: 600;
        font-size: 32rpx;
      }
      span {
        color: #0b314d;
        font-size: 26rpx;
        padding: 20rpx 0;
      }
      p {
        font-size: 24rpx;
        background: transparent;
      }
    }
  }
  .bottom {
    // height: 660rpx;
    flex: 1;
    margin-top: 20rpx;
    .canva {
      width: 320rpx;
      height: 320rpx;
      margin: 0 auto;
    }
    .canvas {
      width: 100%;
      height: 210rpx;
    }
    .code {
      display: flex;
      justify-content: center;
      background: transparent;
    }
    .line {
      width: 100%;
      height: 1rpx;
      background: rgb(218, 216, 216);
      margin-bottom: 10rpx;
    }
    .rules {
      padding: 38rpx 10rpx;
      color: #000;
      font-size: 28rpx;
    }
    .rules-item {
      padding: 0 10rpx;
    }
  }
}
</style>
